<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>index</title>
</head>

<body>
  <input id="file" type="file" multiple="multiple" />
  <button id="submit">上传</button>
  <button id="down">下载</button>
  <button id="reqst">请求</button>
  <script>
    //上传
    document.getElementById('submit').addEventListener('click', async (e) => {
      /** @type FileList*/
      const files = document.getElementById('file').files
      const formData = new FormData()
      Array.from(files).forEach(file => {
        formData.append('myfile', file)
      })
      formData.append('name', 'huahua')

      const arraybuffer = await files[0].arrayBuffer()

      const ret = await fetch('/api/files/upfile-stream', {
        method: 'POST',
        // body: formData
        headers: {
          'content-type': `application/octet-stream`,
          'Content-Disposition': `attachment; filename="${files[0].name}"`
        },
        body: arraybuffer
      }).then(res => res.json())
      console.log(ret)
    })

    //下载
    document.getElementById('down').addEventListener('click', async (e) => {
      let filename;
      const blob = await fetch('/api/files/download', { method: 'POST' })
        .then(res => {
          const cd = res.headers.get('Content-Disposition')
          let [_, _filename] = cd.match(/filename=([^;]+)/) ?? []
          filename = _filename
          return res.blob()
        })
      // console.log(ret, m)

      // 创建下载链接
      const href = window.URL.createObjectURL(blob)
      // 创建a标签并为其添加属性
      const link = document.createElement('a')
      link.href = href
      link.download = filename
      // 触发事件
      link.click()
    })

    //请求
    document.getElementById('reqst').addEventListener('click', async (e) => {
      const ret = await fetch('https://127.0.0.1:8080/api/test/post', {
        method: 'POST',
        body: JSON.stringify({ a: 1, b: 3 })
      }).then(res => res.json())

      console.log(ret)
    })

  </script>
</body>

</html>